<template>
  <div class="saech_filer_box">
    <el-form
      ref="form"
      :model="searchForm"
      label-position="top"
      label-width="auto"
      :inline="false"
      size="small"
    >
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">筛选</el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="任务号" prop="taskNumber">
            <el-select
              v-model="searchForm.taskNumber"
              size="small"
              class="w100"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in taskList"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="任务状态" prop="taskStatus">
            <el-select
              v-model="searchForm.taskStatus"
              size="small"
              class="w100"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in taskStateList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="设备" prop="deviceToken">
            <el-select
              v-model="searchForm.deviceToken"
              size="small"
              class="w100"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in deviceData"
                :key="item.token"
                :label="item.name"
                :value="item.token"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="零件号" prop="partNumber">
            <el-select
              v-model="searchForm.partNumber"
              size="small"
              class="w100"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in tableDataUniqBy('partNumber')"
                :key="item.partNumber"
                :label="item.partNumber"
                :value="item.partNumber"
              />
            </el-select> </el-form-item
        ></el-col>

        <el-col :span="24" :offset="0">
          <el-form-item label="日期：">
            <el-date-picker
              class="w100"
              v-model="dateArr"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '00:00:00']"
              size="mini"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="search_btns flex-x flex-space">
      <el-button style="width: 49%" class="reset" size="mini" @click="reSet"
        >重置</el-button
      >
      <el-button
        style="width: 49%"
        class="submit"
        size="mini"
        type="primary"
        @click="submitForm"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { TASK_STATUS } from "@/utils/local";
import { currentDate3 } from "@/utils/currentDate";
import { getTaskDownLoadInfos } from "@/api/deviceOperation";
import { getDevicesV2 } from "@/api/device";
export default {
  props: {
    dataAll: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dateArr: [],
      taskStateList: [
        {
          name: "未发布",
          value: "0"
        },
        {
          name: "已发布",
          value: "1"
        }
      ],
      TASK_STATUS,
      searchForm: {
        stepNumber: "",
        batchNumber: "",
        partNumber: "",
        processNumber: "",
        startDate: "",
        endDate: "",
        // startDate: currentDate(),
        // endDate: currentDate({
        //   hours: 23,
        //   minute: 59,
        //   second: 59,
        // }),
        stateList: []
      },
      taskList: [],
      deviceData: []
    };
  },
  computed: {
    tableDataUniqBy() {
      return function(key = "processNumber") {
        return _.uniqBy(this.dataAll, key);
      };
    }
  },
  mounted() {
    this.init();
    this.getDeviceList();
  },
  methods: {
    // 获取零件号列表
    init() {
      getTaskDownLoadInfos({
        page: 1,
        pageSize: 9999,
        parentTaskNumber: "ROOT"
        // startDate: data && data.startDate ? data.startDate : currentDate(),
      }).then(res => {
        this.taskList = res.data.results.map(item => {
          return item.taskNumber;
        });
      });
    },
    // 获取设备列表
    async getDeviceList() {
      var params = {
        excludeAssigned: false,
        page: 1,
        pageSize: 9999
      };
      getDevicesV2(params).then(res => {
        const r = res.data;
        this.deviceData = r.results.map(item => {
          const obj = {
            token: item.idevice.token,
            name: item.idevice.name
          };
          return obj;
        });
        console.log("this.deviceData=>", this.deviceData);
      });
    },
    // 重置
    reSet() {
      this.dateArr = [];
      this.searchForm = {
        partNumber: ""
      };
      this.$emit("setFilterList");
    },
    submitForm() {
      if (this.searchForm.partNumber || this.dateArr.length) {
        this.$emit("setFilterList", {
          ...this.searchForm,
          startDate: this.dateArr.length ? currentDate3(this.dateArr[0]) : "",
          endDate: this.dateArr.length ? currentDate3(this.dateArr[1]) : ""
        });
      } else {
        this.$emit("setFilterList", { ...this.searchForm });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.saech_filer_box {
  position: relative;
  height: 100%;
  /deep/.el-form-item {
    margin-bottom: 10px;
    .el-form-item__label {
      padding-bottom: 0 !important;
    }
  }
  .search_btns {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 10px;
    left: 0;
  }
}
</style>
